<template>
	<view class="detail">
		<diykkk v-if="mask" :goods="goods" :address="address" @closePop="makesure(1)" @myEven="immediatelyIndiana"></diykkk>
		<view class="head">
	<!-- 		<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" :circular="true" @change="currentIndex">
				<swiper-item v-for="(item,index) in imageData":key="index" @click="previewIMG(index)">
					<image src=""></image>
				</swiper-item>
			</swiper>
			<view class="img-indicator-dots" v-if="imageData.length > 1 ? true : false">
				<text>{{currenImg}}</text>
				<text>/{{imageData.length}}</text>
			</view> -->
			<image class="headimg" :src="goods.goods_img"></image>
			<view class="head_t">
				<text class="t1">第{{goods.stage}}期</text>
				 {{goods.goods_name}}
			</view>
		</view>
		<view class="has_open" v-if="ishiden===1">
			<view class="part1">
				<image :src="$util.img('/upload/uniapp/contribution/fireworks_left@2x.png')"></image>
				<view class="p1_name">已开奖</view>
				<image :src="$util.img('/upload/uniapp/contribution/fireworks_right@2x.png')"></image>
			</view>
			<view class="part2">恭喜{{goods.winners}}获得本期夺宝商品</view>
		</view>
		<view class="not_open" v-if="ishiden===0">
			<view class="not_p1">
				<progress v-if="goods" class="pro" :percent="percent" border-radius=33 stroke-width="32" activeColor="#FF4544" backgroundColor="#FFCE89"></progress>
				<view class="triangle"></view>
			</view>
			<view class="not_p2 flex-between">
				<view class="not_t">总需{{goods.exchange_value}}数字资产</view>
				<view class="not_t">还差{{goods.exchange_value - goods.have_value}}数字资产</view>
			</view>
		</view>
		<view class="list">
			<view class="list_h" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/contribution/detail_listheadbgm@2x.png') + ')' }">
				<view class="list_h_name">参与记录</view>
				<view class="list_h_content">
					<view class="view1">用户</view>
					<view class="view2">数字资产</view>
					<view class="view3">时间</view>
				</view>
			</view>
			<view class="list_c">
				<scroll-view scroll-y style="height: 400rpx;" @scrolltolower="getMoreData">
					<view class="list_item" v-for="(item,index) in data" :key="index">
						<view class="content">
							<view class="phone">{{item.phone}}</view>
							<view class="num">{{item.exchange_value}}</view>
							<view class="phone">{{item.create_time}}</view>
						</view>
						<!-- <view class="line"></view> -->
					</view>
				</scroll-view>
			</view>
			<view class="bottom_view"></view>
		</view>
		<view class="but" v-if="ishiden===0" @click="makesure(2)">立即夺宝</view>
	</view>
</template>
<script>
	import diykkk from './diy/diy_indiana/diy_indiana.vue'
	export default{
		data() {
			return {
				ID:0,
				ishiden: 0,//0是未开奖，1是已开奖
				mask:false,
				// currenImg:1,//当前显示第几页的照片
				// imageData:[1,2,3,4,5,6],
				goods:'',
				data:[],
				page:1,
				page_size:10,
				page_count:1,
				address:'',
				stage: ''
			}
		},
		components:{
			diykkk
		},
		computed: {
			percent() {
				return parseFloat(this.goods.have_value/this.goods.exchange_value*100).toFixed(2);
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.page = 1;
				this.getData()
				this.getAddressDetail()
			} else {
				this.$util.redirectTo(
					'/otherpages/login/login/login', {
						back: '/promotionpages/contribution/details?id='+this.ID
					},
					'redirectTo'
				);
			}
		},
		onLoad(options){
			this.stage = options.stage || '';
			this.ID = options.id
		},
		methods:{
			makesure(val){//夺宝
				val == 1 ? this.mask = false : this.mask = true;
			},
			getData(){
				let url = '/loot/api/Activity/getConductActivity'
				if (this.stage) {
					url = '/loot/api/Activity/getWinnersActivity';
				}
				this.$api.sendRequest({
					url:url,
					data:{
						id:this.ID,
						stage: this.stage,
						page:this.page,
						page_size:this.page_size
					},
					success:res =>{
						if(res.code==0){
							this.goods = res.data.activity
							uni.setNavigationBarTitle({
								title: this.goods.goods_name
							})
							if(this.goods.winners){
								this.ishiden = 1
							}else{
								this.ishiden = 0
							}
							let newArr = []
							newArr = res.data.list
							if(this.page==1){
								this.data = []
							}
							this.data = this.data.concat(newArr)
							this.page_count = res.data.page_count
						}else{
							this.$util.showToast({
								title: res.message
							});
						}
					}
				})
			},
			//上拉加载更多
			getMoreData(){
				if(this.page < this.page_count){
					this.page++;
					this.getData();
				}
			},	
			//获取默认地址
			getAddressDetail() {
				this.$api.sendRequest({
					url: '/api/memberaddress/info',
					data: {
						default:1
					},
					success: res => {
						let data = res.data;
						if (data != null) {
							this.address = data
						}
					},
				});
			},
			//夺宝商品
			immediatelyIndiana(num) {
				this.$api.sendRequest({
					url: '/loot/api/Activity/attendActivity',
					data: {
						id:this.ID,
						address_id:this.address.id,
						exchange_value:num
					},
					success: res => {
						this.makesure(1)
						this.getData()
						this.$util.showToast({
							title: res.message
						});
					},
				});
			},
		}
		
	}
</script>

<style lang="scss">
	@mixin bgm($imagename) {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// background-image: url('../../common/img/contribution/'+$imagename);
	}
	@mixin flex($jusitify,$align) {
		display: flex;
		justify-content: $jusitify;
		align-items: $align;
	}
	.flex-left{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.flex-between{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.detail{
		width: 750rpx;
		min-height: 100vh;
		padding-bottom: 60rpx;
		background: #FFE8E8;
		.head{
			width: 750rpx;
			height: 920rpx;
			background: #FFFFFF;
			.headimg{
				width: 100%;
				height: 750rpx;
			}
			// .swiper{
			// 	width: 100%;
			// 	height: 750rpx;
			// 	image{
			// 		width: 100%;
			// 		height: 100%;
			// 		background: #FF9800;
			// 	}
			// }
			.img-indicator-dots{
				position: absolute;
				right: 40rpx;
				top: calc(var(--status-bar-height) + 670rpx);
				font-size: 20rpx;
				color: #FFFFFF;
				width: 70rpx;
				height: 30rpx;
				background-color: #000000;
				opacity:0.3;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 17rpx;
			}
			.head_t{
				margin: 41rpx 30rpx 39rpx 30rpx;
				max-height: 90rpx;
				line-height: 45rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #303133;
				overflow: hidden;
				word-break: break-all;  /* break-all(允许在单词内换行。) */
				text-overflow: ellipsis;  /* 超出部分省略号 */
				display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 2; /** 显示的行数 **/
				.t1{
					width: 104rpx;
					height: 40rpx;
					background: #FF4544;
					border-radius: 16rpx 0 16rpx 0;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					display: inline-block;
					text-align: center;
				}
			}
		}
		.has_open{
			.part1{
				padding: 47rpx 233rpx 0 233rpx;
				display: flex;
				image{
					width: 72rpx;
					height: 50rpx;
				}
				.p1_name{
					margin-left: 16rpx;
					margin-right: 16rpx;
					height: 50rpx;
					font-size: 36rpx;
					line-height: 50rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF4544;
					text-align: center;
				}
			}
			.part2{
				margin-top: 15rpx;
				margin-bottom: 40rpx;
				height: 38rpx;
				line-height: 38rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4544;
				text-align: center;
			}
		}
		.not_open{
			padding: 41rpx 30rpx 40rpx 30rpx;
			.not_p1{
				.triangle{
					width: 0;
					/*盒子宽度为0，四个方向的border宽度一致，可以用border做正方形*/
					margin-left: 600rpx;
					border-left: 12rpx solid transparent;
					border-right: 12rpx solid transparent;
					border-top: 12rpx solid #FFCE89;
					border-bottom: 12rpx solid transparent;
					}
			}
			.not_p2{
				.not_t{
					height: 33rpx;
					font-size: 24rpx;
					line-height: 33rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #303133;
				}
			}
		}
		.list{
			padding: 0 30rpx 90rpx 30rpx;
			background: #FFE8E8;
			.list_h{
				width: 100%;
				height: 142rpx;
				@include  bgm('detail_listheadbgm@2x.png');
				.list_h_name{
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
				}
				.list_h_content{
					margin-top: 25rpx;
					display: flex;
					.view1{
						width: 156rpx;
						margin-left: 18rpx;
						height: 34rpx;
						line-height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #606266;
						text-align: center;
					}
					.view2{
						width: 200rpx;
						margin-left: 10rpx;
						text-align: center;
						height: 34rpx;
						line-height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #606266;
					}
					.view3{
						width: 234rpx;
						margin-left: 30rpx;
						text-align: center;
						height: 34rpx;
						line-height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #606266;
					}
				}
			}
			.list_c{
				background-color:#FFFFFF ;
				.list_item{
					padding: 23rpx 22rpx 0 18rpx;
					background: #FFFFFF;
					.content{
						display: flex;
						justify-content: space-around;
						.num{
							height: 37rpx;
							line-height: 37rpx;
							font-size: 26rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #FF4544;
						}
						padding-bottom: 23rpx;
						border-bottom: 1rpx solid #EBEBEB;
					}
					.line{
						margin-top: 23rpx;
						height: 1rpx;
						background: #EBEBEB;
					}
				}
			}
			.bottom_view{
				width: 100%;
				height: 16rpx;
				border-radius: 0 0 16rpx 16rpx;
				background-color:#FFFFFF ;
			}
		}
		.but{
			position: fixed;
			bottom: 0rpx;
			width: 100%;
			height: 88rpx;
			background: #FF4544;
			font-size: 28rpx;
			line-height: 40rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.phone{
		height: 37rpx;
		font-size: 26rpx;
		line-height: 37rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #303133;
	}
</style>
